<div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/survey">评论管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>评论列表</el-breadcrumb-item>
    </el-breadcrumb>

     <el-row :gutter="10">
       <el-col :span="8">
            <el-input placeholder="请输入要查询的学生评论" v-model="searchText">
                <el-button  @click="startQuery()"  slot="append"  icon="el-icon-search" ></el-button>
            </el-input>
        </el-col>
        <el-col :span="8">
            <el-button @click="showAddSurveyDialog()">添加评论</el-button>
        </el-col>
    </el-row>

    <el-table  :data="surveyData" style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="id"
            width="150">
        </el-table-column>
        <el-table-column
        fixed
        prop="sremarks"
        label="学生评论"
        width="150">
    </el-table-column>
    <el-table-column
    fixed
    prop="tremarks"
    label="教师评论"
    width="150">
</el-table-column>

    <el-table-column
    prop="suggestions"
    label="建议"
    width="120"></el-table-column>


        <el-table-column label="操作">
            <!-- element ui  table表格的自定义列 -->
            <template slot-scope="scope">
                <!-- element -ui  button   plain属性，鼠标放上去变蓝色  size="mini" -->
                <el-button type="primary" icon="el-icon-edit" circle plain
                    @click="showEditSurveyDialog(scope.row)"
                > </el-button>
                <el-button type="danger" icon="el-icon-delete" circle plain
                    @click="delSurvey(scope.row.id)"
                ></el-button>
            </template>
        </el-table-column>

    </el-table>

     <!-- 分页   默认情况下 每10条   保存当前页(current-page)   改变页码的事件   每页多少条(page-size)
     @current-change改变当前页的事件  changeCurrentPage   内部传了一个当前页的实参-->
     <el-pagination
     :background="true"
     layout="prev, pager, next"
     :total="totalCount"
     :page-size="4"
     :current-page="pageIndex"
     @current-change = "changeCurrentPage"
     >
 </el-pagination>

    <el-dialog title="添加评论" :visible.sync="addDialogFormVisible"
      :rules='rules' label-width="100px" ref = "addSurvey">
      <el-form :model="survey">
        <el-form-item label="学生评论" prop="sRemarks">
            <el-input v-model="survey.sremarks"></el-input>
        </el-form-item>
  <el-form-item label="教师评论" prop="tRemarks">
    <el-input v-model="survey.tremarks"></el-input>
</el-form-item>

<el-form-item label="建议" prop="suggestions">
    <el-input v-model="survey.suggestions"></el-input>
</el-form-item>

        </el-form>


        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSurvey()">确 定</el-button>
        </div>
     </el-dialog>



     <el-dialog title="编辑评论" :visible.sync="dialogEditSurveyVisible">
        <el-form :model="editSurvey" label-width="80px">

            <el-form-item label="学生评论" prop="sremarks">
                <el-input v-model="editSurvey.sremarks"></el-input>
                </el-form-item>


            <el-form-item label="教师评论" prop="tremarks">
                <el-input v-model="editSurvey.tremarks"></el-input>
                </el-form-item>


            <el-form-item label="建议" prop="suggestions">
                <el-input v-model="editSurvey.suggestions"></el-input>
                </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditSurveyVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSurvey()">确 定</el-button>
        </div>
  </el-dialog>


</div>
